<template>
    <div class="wrap" id="wrap">
        <search mark="1"></search>
        <div class="list">
            <div v-for="post in list">
                <post-item :item="post"></post-item>
            </div>
            <div @click="getMore">加载更多>></div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "post",
        data(){
            return {list:[],page:1,isFinish:false,isLoading:false}
        },
        created(){
           this.getData();
        },
        mounted(){
            var that = this;
            window.onscroll=function(){
                var rootE= document.documentElement;
                var wrap = document.getElementById("wrap");
                var screenH = rootE.clientHeight;
                var scrollTop = rootE.scrollTop||document.body.scrollTop;
                var wrapH = wrap.scrollHeight;

                if(screenH+scrollTop>=wrapH){
                    that.page++;
                    if(!that.isFinish&&!that.isLoading){
                        that.getData();
                        console.log(that.page);
                    }else{
                        console.log("没有数据或者正在请求中...");
                    }

                }
            }
        },
        methods:{

            getMore(){

                this.page++;
                if(this.isFinish){
                    console.log("没有更多数据了!!");
                }else{
                    this.getData();
                    console.log(this.page);
                }

            },
            getData(){

                this.isLoading=true;

                axios.get("post/mlist?page="+this.page).then(res=>{
                   var that=this;
                   setTimeout(function(){
                       that.isLoading=false;
                   },1500);


                    if(res.data.length==0){
                        this.isFinish=true;
                    }

                    if(this.page==1){
                        this.list = res.data;
                    }else{
                        this.list=this.list.concat(res.data);
                    }

                })
            }

        }

    }

</script>

<style scoped>

    .wrap{
        display: flex;
        align-items: center;
        flex-direction: column;

    }

    .list{
        padding-bottom: 1.5rem;
    }

    .search{
        height: 0.95rem;
        width:7.5rem;
    }
    .loading{
        height: 0.5rem;
        line-height: 0.5rem;
        font-size:0.3rem;
        text-align: center;
        width:100%;
        position: fixed;
        left:0;
        top:0;

    }

</style>